<template>
	<view>
		<view class="kongs"></view>
		<view class="tip">
			<image :src="tipspng" mode="aspectFit" class="tips"></image>
		</view>
		<block v-for="(item,index) in list" :key="index">
			<view class="top" >
				<view class="tops dis dis3 dis2" @click="intShow(index)" >
					<view class="tops_left dis dis2">
						<image src="../../../static/image/iconp4_1.png" mode="aspectFit" class="icon"></image>
						<text class="topTexts">{{item.name}}</text>
					</view>
					<view class="topsRigth contenr" >
						<image src="../../../static/image/icon16.png" mode="aspectFit" class="inon16" :class="{'intShow':item.isShows}"></image>
					</view>
				</view>
				<block v-if="item.isShows">
					<block v-for="(i,index1) in item.goodList" :key="index1">
						<view class="item" :class="{'itemLin':i.tlite && index1 !=item.goodList.length-1}">
							<view class="itemTop wid dis dis3 dis2" v-if="i.tlite">
								<text class="texts">{{i.tlite}}</text>
								<image src="../../../static/img/chakan.png" mode="aspectFit" class="cakan" v-if="i.url" @click.stop="showUrl(i.url)"></image>
							</view>
							<view class="iBodys wid dis dis6">
								<view class="itemText contenr" v-for="(t,index2) in i.good" :key="index2" @click.stop="selectBg(item.selectd,t.select,index,index1,t.ItemId,index2)"
								 :class="{'selectTrue':t.select}">{{t.ItemTitle}}</view>
							</view>
						</view>
					</block>
				</block>
			</view>
		</block>
		<view class="kongsLis"></view>
		<view class="bootmTn dis dis1">
			<view class="btonImg contenr"  @click="preserve">
				<text class="texts1">保存记录</text>
			</view>
		</view>
		<view class="bgceng dis dis1 dis2 dis5" v-if="showUrls">
			<view class="conImage">
				<image :src="images" mode="aspectFit" class="conImag"></image>
			</view>
			<image src="../../../static/img/del.png" mode="aspectFit" class="del" @click="delBgceng"></image>
		</view>
		
	</view>
</template>

<script>
	let app = getApp().globalData;
	import config from '@/common/js/config.js';
	export default {
		data() {
			return {
				list: [],
				current: 1,
				imgUrl: '../../../static/image/iconp.png', //选中的勾
				imgUrl1: '../../../static/image/iconp1.png', //选中的勾
				isSelect: false, //是否显示保存图片
				indexTo: 0,
				answerList: [], //答案的数据集合
				id: '',
				nums: 0,
				images: '',
				showUrls: false,
				tipspng:`${config.imgUrl}tips.png`
			}
		},
		methods: {
			intShow(index) {
				let list = this.list;
				list[index].isShows = !list[index].isShows;
				this.list = list
			},
			showUrl(url) {
				this.images = url;
				this.showUrls = true;
			},
			delBgceng() {
				this.showUrls = false;
			},
			getChange(e) {
				this.current = e.detail.current + 1
				// console.log(this.current)

			},
			// 选择标签
			selectBg(selectd, select, index1, index2, id, index3) {
				/*
				selectd:第一层数据的选中状态
				select:第三层数据的选中状态
				index1：数组下标，
				index2：数组下标
				index3：数组下标,
				id:答案的id
				*/
				let list = this.list;
				let isSelect = false;
				list[index1].goodList[index2].good[index3].select = !list[index1].goodList[index2].good[index3].select;
				let goods = list[index1].goodList;
				for (let i = 0; i < goods.length; i++) {
					let goodList = goods[i].good;
					for (let y = 0; y < goodList.length; y++) {
						if (goodList[y].select) {
							isSelect = true;
						}
					}
				}
				list[index1].selectd = isSelect;
				this.isPushList(id);
				this.list = list;
				// this.$forceUpdate();
				this.isShowS(list);

			},
			// 判断保存记录图片是否显示
			isShowS(list1) {
				let list = list1;
				// console.log(list)

				let is = false;
				for (let i = 0; i < list.length; i++) {
					if (list[i].selectd) {
						is = true
					}
				}
				this.isSelect = is

				// console.log('is',is)
			},
			// 点击切换
			switchover(e) {
				this.indexTo = e;
				this.current = e + 1
			},
			setListData() {
				let that = this;
				let timeStart = Date.now();
				let answerList = this.answerList
				this.$http._post('examination/examination.do', {
					id: that.id
				}).then(res => {
					console.log(res)
					if (res.data.isneedlogin == 1) {
						that.$http.isMssage(res.data.msg);
						return;
					}
					let {
						data
					} = res.data;
					// console.log(data)
					let list = [];
					for (let i in data) {
						let s = i.split(',');
						list.push({
							name: s[0],
							goodList: data[i],
							selectd: false,
							imagUrl: s[1],
							isShows: true
						})
					}

					for (let i = 0; i < list.length; i++) {
						let list1 = [];
						let datas = list[i].goodList;
						if (datas.constructor === Array) {
							list[i].goodList = [];
							list[i].goodList.push({
								good: datas
							})
							continue;
						}
						for (let y in datas) {
							// 这里有图片需要处理数据
							let slist = y.split(',');
							// console.log('slist',slist)
							list1.push({
								tlite: slist[0],
								good: datas[y],
								url: slist[1]
							})
						}
						list[i].goodList = list1;
					}
					for (let i = 0; i < list.length; i++) {
						let goodList = list[i].goodList
						for (let y = 0; y < goodList.length; y++) {
							let good = goodList[y].good;
							for (let z = 0; z < good.length; z++) {
								if (good[z].IsSelect == 1) {
									list[i].selectd = true;
									good[z].select = true;
									answerList.push(good[z].ItemId)
								} else {
									good[z].select = false
								}
							}
						}
					}
					console.log('list', list)
					that.list = list;
					console.log(`渲染耗时${Date.now() - timeStart}ms`);
					if (answerList.length > 0) {
						that.isSelect = true;
					}
					// console.log('answerList',this.answerList)
					this.nums = this.answerList.length;
				})

				//
			},
			isPushList(id) {
				// console.log('id',id)
				let answerList = this.answerList;

				let isPush = false;
				if (answerList.length == 0) {
					answerList.push(id)
				} else {
					for (let i = 0; i < answerList.length; i++) {
						if (answerList[i] == id) {
							answerList.splice(i, 1);
							isPush = false;
							// console.log('sssss')
							break
						} else {
							isPush = true;
						}
					}
					if (isPush) {
						answerList.push(id)
					}
				}
				this.answerList = answerList;
				this.nums = answerList.length;
				console.log('answerList', answerList)
			},
			// 提交数据
			preserve() {
				let that = this;
				this.$http._post('examination/examinationsubmit.do', {
					classid: that.id,
					itemlist: that.answerList
				}).then(res => {
					if (res.data.issuccess == 1) {
						that.$http.isMssage('提交成功');
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, 2000)
					}
					console.log(res)
				})
			}

		},

		onLoad(e) {
			console.log(e)
			uni.setNavigationBarTitle({
				title: e.title
			});
			this.id = e.id; //
			this.setListData();
			// console.log(this.list)
		}
	}
</script>

<style lang="scss">
	@import "../../../common/css/flex.css";
	@import "../../../common/css/index.scss";

	.kongs {
		width: 100%;
		// height: 32upx;
	}
	.tip{
		width: 686upx;
		height: 71upx;
		margin: 20upx auto 30upx auto;
		.tips{
			width: 686upx;
			height: 71upx;
		}
	}

	.top {
		width: 686upx;
		min-height: 139upx;
		background: #FFFFFF;
		border-radius: 24upx;
		margin: 16upx auto 32upx auto;

		.tops {
			width: 100%;
			height: 139upx;

			.tops_left {
				width: 50%;
				height: 100%;

				.icon {
					width: 12upx;
					height: 24upx;
					margin-right: 24upx;
				}

				.topTexts {
					font-size: 36upx;
					font-family: $typeface;
					font-weight: 500;
					color: #333333;
				}
			}

			.topsRigth {
				width: 10%;
				height: 100%;
				margin-right: 24upx;

				.inon16 {
					width: 44upx;
					height: 44upx;
				}

				.intShow {
					transform: rotate(90deg); //180°旋转图片。
				}
			}
		}
		.intShowHig{
			height: 124upx;
		}

		.item {
			width: 610upx;
			margin: auto;
			margin-bottom: 10upx;
			padding: 18upx 0;
			.wid {
				width: 578upx;
				// margin-left: 36upx;
			}

			.itemTop {
				height: 35upx;
				margin-bottom: 18upx;
				width: 622upx;
				.texts {
					font-size: 28upx;
					font-family: $typeface;
					font-weight: 500;
					color: #333333;
				}

				.cakan {
					width: 115upx;
					height: 35upx;
				}
			}

			.iBodys {
				.itemText {
					height: 56upx;
					background: #F8F8F8;
					border-radius: 28upx;
					padding: 0 20upx;
					margin-right: 32upx;
					font-size: 24upx;
					font-family: $typeface1;
					font-weight: 400;
					color: #666666;
					// margin-top: 16upx;
					margin-bottom: 20upx;
					min-width: 100upx;

				}

				.selectTrue {
					background-color: #FFF0C2;
					font-size: 24upx;
					font-family: $typeface;
					font-weight: 500;
					color: #333333;
				}
			}
		}
		.itemLin{
			border-bottom: 0.5px solid #e8e8e8;
			margin-bottom: 18upx;
			
			
		}
	}


	.bgceng {
		width: 100%;
		height: 100%;
		position: fixed;
		background: rgba(0, 0, 0, 0.6);
		bottom: 0;
		z-index: 99;

		.conImage {
			width: 666upx;
			height: 776upx;
			// background: #FFFFFF;
			border-radius: 24upx;

			.conImag {
				width: 666upx;
				height: 776upx;
			}
		}

		.del {
			margin-top: 42upx;
			width: 72upx;
			height: 72upx;
		}
	}
	.bootmTn{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 163upx;
		// border-top: 0.5px solid #e8e8e8;
		.btonImg{
			width: 446upx;
			height: 88upx;
			background-color: #ffd334;
			font-size: 32upx;
			font-family: $typeface;
			font-weight: 500;
			color: #333333;
			border-radius: 60upx;
			
		}
		.images{
			width: 446upx;
			height: 88upx;
		}
	}
	.kongsLis{
		height: 200upx;
		width: 100%;
	}
	
</style>
